<template>
    <div class="app-container">
        <el-form inline>

            <el-form-item label="人员名称">
                <el-input v-model="formdata.realName" filterable clearable></el-input>
            </el-form-item>

            <el-form-item label="任务类型" clearable>
                <!-- <el-select v-model="form.taskTypeId" filterable clearable> -->
                <!-- <el-option :label="item.typeName" :value="item.id" v-for="item in $store.state.renwulx.leixing"
                        :key="item.id"> -->
                <!-- {{ form.groupId }} -->
                <el-cascader v-model="orgs" @change="asdf" :options="options"
                    :props="{ label: 'name', value: 'id' }"></el-cascader>


                <!-- </el-option> -->
                <!-- </el-select> -->
            </el-form-item>
            <!-- <el-form-item label="任务类型" clearable>
                <el-select v-model="formdata.groupId" filterable clearable>
                    <el-option :label="item.name" :value="item.id" v-for="item in $store.state.renwulx.zu"
                        :key="item.id">

                    </el-option>
                </el-select>
            </el-form-item> -->


            <el-form-item>
                <el-button type="primary" size="mini" @click="huoqu">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="form" border>
            <el-table-column prop="id" label="编号ID"></el-table-column>
            <el-table-column prop="realName" label="姓名"></el-table-column>
            <el-table-column prop="teamRole" label="站内身份"></el-table-column>
            <el-table-column label="组内职务" prop="orgRole"></el-table-column>
            <el-table-column prop="gender" label="性别"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>

            <el-table-column prop="politics" label="政治" width="300px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="xq(scope.row.realName)">详情</el-button>
                    <el-button type="primary" size="mini" @click="cq(scope.row)">编辑</el-button>

                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formdata.page" :page-sizes="[10, 20, 30, 40]" :page-size="formdata.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <el-dialog title="人员详情" :visible.sync="chuxian" :destroy-on-close=true v-if="chuxian">
            <reny :ming="mz"></reny>
        </el-dialog>
        <el-dialog title="人员编辑" :visible.sync="chuxianl" :destroy-on-close=true v-if="chuxianl">
            <bianji :azhe="id"></bianji>
        </el-dialog>
    </div>
</template>
<script>
import reny from '@/views/zhuanyezu/renyuan.vue'
import bianji from '@/views/zhuanyezu/bianji.vue'
import { huoqurw, huozhiwu } from '@/api';
export default {
    components: {
        reny, bianji
    },
    data() {
        return {
            chuxianl: false,
            chuxian: false,
            orgs: '',
            form: [],
            formdata: {
                groupId: '',
                realName: "",
                page: 1,
                pageSize: 10
            },
            total: 0,
            options: [],
            mz: '',
            id: ''
        }
    },
    methods: {


        cq(id) {
            if (id) {
                this.id = id
            }
            this.chuxianl = true
        },
        xq(val) {
            this.mz = val,
                console.log(this.mz, 9182);
            this.chuxian = true
        },
        asdf() {
            if (this.orgs) {
                this.formdata.groupId = this.orgs[this.orgs.length - 1]

            }
        },
        recursion(data, arr, parentId) {
            data.forEach(item => {
                if (item.parentId === parentId) {
                    arr.push(item)
                    if (data.some(it => it.parentId === item.id)) {
                        item.children = [{ name: item.name, id: item.id }]
                        this.recursion(data, item.children, item.id)


                    }
                }
            },



            )
        },

        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.formdata.pageSize = val,
                this.huoqu()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.formdata.page = val
            this.huoqu()
        },



        async gethuozhiwu() {
            let res = await huoqurw(this.formdata)
            // console.log(res,8888666444);

            let memberIds = res.data.records.map(item => item.id).join(",")

            // console.log(res, 88336655);
            let gres = await huozhiwu({ memberIds })
            // console.log(gres, 994477);

            // console.log(gres.data, 99999111345);

            res.data.records.forEach(item => {

                let group = gres.data.find(g => g.memberId == item.id && g.orgId == this.formdata.groupId);
                item["group"] = group

                // item["orgRole"] = item.group.orgRole 
                let zw = item.group.orgRole
                // console.log(zw, 8765);

                item['orgRole'] = zw
                // console.log(group.orgRole, 884400);
            })



            let order = ["队长", "副队长", "组长", "副组长", "正式组员", "预备组员"]
            res.data.records.sort((a, b) => {
                return order.indexOf(a.orgRole) - order.indexOf(b.orgRole)
            })

            this.form = res.data.records
            this.total = res.data.total

        },


        huoqu() {


            console.log(this.formdata.groupId);

            if (this.formdata.groupId) {

                this.gethuozhiwu()

            } else {
                this.$message({
                    type: 'error',
                    message: 'gg'
                })
            }

        }

    },
    mounted() {
        this.recursion(this.$store.state.renwulx.zu, this.options, null)
    }
}
</script>